import { Button, InfiniteScroll, NavBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { Tabs } from 'react-vant'
import axios from 'axios'
import ListItem from '../../components/listItem/Index'
import { useLocation, useNavigate } from 'react-router-dom'
function Index() {
  const date = ['03-12', '03-13', '03-14', '03-15', '03-16']
  const [page, setPage] = useState(1)
  const [active, setActive] = useState(0)
  const { state } = useLocation()
  const [isSpeed, setIsSpeed] = useState(false)
  const [isSeat, setIsSeat] = useState(false)
  const [list, setList] = useState([])
  const navigate=useNavigate()
  const data = [
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
    {
      fangxiang: "北京西-三亚",
      seat: '商务座'
    },
  ]
  const getData = async () => {
    const resp = await axios.post('/api/trip/train',
      { ...state, isSpeed, isSeat, page }
    )
    setList(list.concat(resp.data.data))
    setPage(page + 1)
  }
  useEffect(() => {
    getData()
  }, [])

  return (
    <div>
      <NavBar>{state.start}-{state.end}</NavBar>
      <div style={{ display: 'flex' }}>
        <Button onClick={() => setActive(active - 1)}>前一天</Button>
        <div style={{ width: '70vw' }}>
          <Tabs
            active={active} scrollspy={true} onChange={() => setActive(active)}
          >
            {date.map((v, i) => {
              return <Tabs.TabPane key={i} title={v}>

              </Tabs.TabPane>
            })}
          </Tabs>
        </div>
        <Button onClick={() => setActive(active + 1)}>后一天</Button>
      </div>
      {list.map((v, i) => {
        return <ListItem v={v}></ListItem>

      })}
      {
        data.map((v, i) => {
          return <div key={i} onClick={()=>navigate('/detail')}>{v.fangxiang}{v.seat}</div>
        })
      }
<InfiniteScroll hasMore={true} loadMore={getData}></InfiniteScroll>
    </div>
  )
}

export default Index